<template>
    <div class="report">
        <h5>
            <span>举报信息</span>
            <span class="add my-background" @click="addClick">{{editnum?'编辑':'保存'}}</span>
        </h5>
        <div class="edit_container" v-if="!editnum">
            <quill-editor 
                v-model="content" 
                ref="myQuillEditor" 
                :options="editorOption" 
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
        </div>
        <!-- 从数据库读取展示 -->
        <div class="ql-editor" v-else>
            <span v-html="str?str: '暂无举报信息'"></span>
        </div>
    </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    components: {
        quillEditor
    },
    data(){
        return{
            id:'',
            editnum:true,
            content:'' ,//举报信息
            str:'',
            editorOption: {},
        }
    },
    mounted(){
        this.getcontent()
    },
    methods:{
        //修改
        addClick(){
            if(!this.editnum){
                var agreementEntity={
                    "content": "",
	                "id": 1
                }
                agreementEntity.content=this.content
                agreementEntity.id=this.id
                console.log('agreementEntity',agreementEntity)
                this.axios({
                    url:'/operate/sys/report/update',
                    method:'post',
                    data:JSON.stringify(agreementEntity),
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                }).then(res=>{console.log(res.data)})
                setTimeout(()=>{
                    this.getcontent()
                    this.editnum=true
                },100)
            }else{
                this.editnum=false
            }
        },
        //获取举报信息
        getcontent(){
            this.axios.get('/operate/sys/report/list').then(res=>{
                this.id=res.data.List[0].id
                this.content=res.data.List[0].content
                this.str = this.escapeStringHTML(this.content);
            })
        },
        //失去焦点事件
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        //获得焦点事件
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
            console.log('editor ready!', quill)
        },
        //内容改变事件
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },

    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

<style scoped>
.report>h5{
    display: flex;
    justify-content: space-between;
}
.report>h5 .add{
    display: inline-block;
    font-size: 15px;
    width: 62px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    /* background: rgb(110, 163, 231); */
}
.edit_container{
    margin-top: 50px;
}
.ql-editor{
    margin-top: 50px;
}
</style>
<style>
.ql-toolbar.ql-snow + .ql-container.ql-snow{
    min-height: 230px;
}
</style>